<template>
  <div class="temCon-box">
    <!-- <div class="type-box">
      <el-tag type="info">类型：{{setThisTemplate.componentName}}、需要下拉菜单：{{setThisTemplate.attribute.changeTemType}}、编码{{setThisTemplate.attribute.filedCode}}</el-tag>
    </div> -->
    <el-form ref="setThisTemplate" :model="setThisTemplate" label-width="80px">
      <el-form-item label="标题名称">
        <el-input placeholder="最多8字" maxlength="8" v-model="setThisTemplate.attribute.titName"></el-input>
      </el-form-item>
      <el-form-item label="提示文字">
        <el-input placeholder="最多20字" maxlength="20" v-model="setThisTemplate.attribute.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-checkbox :disabled="setThisTemplate.attribute.filedCode=='uName'||setThisTemplate.attribute.filedCode=='uTel'" v-model="setThisTemplate.attribute.ifCheck">必填</el-checkbox>
      </el-form-item>
      <el-form-item v-if="isChangeTemType" label="下拉菜单">
        <el-checkbox @change="changeTemType()" v-model="setThisTemplate.attribute.changeTemType">需要</el-checkbox>
      </el-form-item>
      <el-form-item v-if="setThisTemplate.attribute.changeTemType" label="菜单选项">
        <div v-for="(item,index) of setThisTemplate.attribute.selectList" :key="index" class="sel-item-box">
          <el-input @change="watchValue(item)" v-model="item.name" placeholder="请输入" style="padding:2px 0"></el-input>
          <el-button @click="delted(index)" v-if="setThisTemplate.attribute.selectList.length>1" icon="el-icon-delete" size="mini"></el-button>
          <el-button @click="addSel(index)" icon="el-icon-plus" size="mini"></el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["setThisTemplate"],
  data() {
    return {
      isChangeTemType: false // //是否可以下拉菜单(即是否可以将字符类型改成选择类型)
    };
  },
  watch: {
    setThisTemplate(val) {
      let filedCode = val.attribute.filedCode;
      let arr = ["uName", "uTel"];
      this.isChangeTemType = false;
      if (arr.indexOf(filedCode) < 0) {
        this.isChangeTemType = true;
      }
    }
  },
  methods: {
    //监听选项是否为空
    watchValue(item) {
      if (!item.name) {
        item.name = "选项";
      }
    },
    //   删除选项
    delted(index) {
      this.setThisTemplate.attribute.selectList.splice(index, 1);
    },
    // 添加选择
    addSel(index) {
      this.setThisTemplate.attribute.selectList.splice(index + 1, 0, {
        name: "选项",
        ifSel: false
      });
      this.$forceUpdate();
    },
    // 改变组件类型
    changeTemType() {
      console.log(this.setThisTemplate.attribute.selectList);
      if (this.setThisTemplate.attribute.changeTemType) {
        this.setThisTemplate.componentName = "moreSelectTem";
        if (!this.setThisTemplate.attribute.selectList.length) {
          this.setThisTemplate.attribute.selectList = [
            {
              name: "选项",
              ifSel: false
            },
            {
              name: "选项",
              ifSel: false
            }
          ];
        }
      } else {
        this.setThisTemplate.componentName = "stringTem";
      }
      this.$forceUpdate();
    }
  }
};
</script>

<style scoped>
.temCon-box {
  width: 100%;
  height: auto;
}
.type-box {
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}
</style>
